<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <style type="text/css">
    </style>
</head>
<body class="hold-transition skin-purple sidebar-mini" style="background-image:url(../img/school.jpg);
                        background-repeat: no-repeat;
                        background-size: 100% 850px";>
    <div id="app">
        <el-container>
            <el-form ref="formLoginForm" :model="formData" :rules="rules"  label-width="80px" class="login-box" style="opacity:0.8" >
                <h3 class="login-title">新生报到签到系统</h3>
                <el-form-item label="学号" prop="stuId">
                    <el-input type="text" placeholder="请输入学号" v-model="formData.stuId"/>
                </el-form-item>
                <el-form-item label="密码" prop="stuPwd">
                    <el-input type="password" placeholder="请输入密码" v-model="formData.stuPwd"/>
                </el-form-item>
             <div style="margin-left: 80px">
                <el-button type="primary" @click="loginConfirm()">登录</el-button>
             </div>
            </el-form>
        </el-container>
        <div style="margin-left: 100px">
            <el-tag type="danger">
                若登录遇到问题,请联系管理员
            </el-tag>
            <el-tag type="warning">
                管理员一号:18978989090
            </el-tag>
            <el-tag type="danger">
                管理员二号:18978989090
            </el-tag>
            <el-tag type="warning">
                管理员三号:18978989090
            </el-tag>
        </div>
    </div>
</body>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script>
    var vue = new Vue({
        el: '#app',
        data:{
            formData: {},//表单数据
            rules: {//校验规则
                stuId: [{ required: true,pattern: /^\d{10}$/, message: '【必填】学号格式错误,10位数', trigger: 'blur'}],
                stuPwd: [{ required: true, message: '【必填】密码必填', trigger: 'blur' }],
            }
        },
        methods: {
            //登录
            loginConfirm(){
                this.$refs['formLoginForm'].validate((valid)=>{
                    if(valid){
                         axios.post("/login/stuLogin",this.formData).then((res)=>{
                            if(res.data.flag){
                                //登录成功后，保存一个sessionStorage
                                sessionStorage.setItem("stuId",this.formData.stuId);
                                location.href="studentIndex.html";
                            }else{//执行失败，弹出提示
                                this.$message.error(res.data.message);
                            }
                         })
                    }else{
                        this.$message.error("数据校验失败，请检查你输入的信息是否正确");
                        return false;
                    }
                })
            },
        }
    })
</script>

<style lang="scss" scoped>
    .login-box {
        border: 1px solid #DCDFE6;
        background-color: aliceblue;
        width: 350px;
        margin: 230px auto;
        padding: 30px 35px 15px 35px;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        box-shadow: 0 0 25px #909399;
    }
    .login-title {
        text-align: center;
        font-size: x-large;
        margin: 0 auto 40px auto;
        color: #303133;
    }
</style>
</html>
